import React, { useEffect, useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { Cell, Image } from "react-vant";
import { ArrowLeft, Ellipsis } from '@react-vant/icons';
import TopTitleBar from "../../components/TopTitleBar";
import axios from "../../utils/axios";
import {myContext} from '../../context';
import "./index.css"
const PersonalCenter = () => {
    const {userInfos} = useContext(myContext);

    const userImg = '../../images/headPortrait.png';
    const navigate = useNavigate();
    // 应该弄一个 全局的 context 或者 redux 去设置 userInfo！
    // 就不用去重复请求了

    return (
        <div className="PersonalCenter">
            <TopTitleBar
                leftIcon={
                    <ArrowLeft onClick={() => navigate(-1)} />
                }
                intermediateContentText="我的"
                rightIcon={
                    <Ellipsis  />
                }
            />
            <div className="topUserInfos">
                <div className="leftHeadPortrait">
                    {/* 左边的 头像图片 */}
                    {/* 为什么 用 相对路径不可以？？ */}
                    {/* <Image src={userImg} /> */}
                    <Image src='https://s.yezgea02.com/1604040746310/aaaddd.png' round width='5rem' height='5rem' />
                </div>
                <div className="rightInfos">
                    <div className="infos">
                            昵称 {userInfos?.nickName}
                    </div>
                    <div className="infos">
                            登录名 {userInfos?.loginName}
                    </div>
                    <div className="infos">
                            个性签名 {userInfos?.introduceSign}
                    </div>
                </div>
            </div>
            <div className="mainContent">
                {/* 写一个组件，或者 用 vant 组件： */}
                <Cell title='我的订单' isLink onClick={ () => navigate('/myOrders') } />
                <Cell title='账号管理' isLink onClick={ () => navigate('/accountManagement') } />
                <Cell title='地址管理' isLink onClick={ () => navigate('/addressManagement') } />
                <Cell title='关于我们' isLink onClick={ () => navigate('/aboutUs') } />
            </div>
        </div>
    )
}

export default PersonalCenter;